<template>
  <div class="circle">
    <scrcletop></scrcletop>
    <!-- 商家列表 开始-->
    <div class="main">
      <router-link
        :to="`/pdetails?sid=${item.sid}`"
        class="list"
        v-for="(item, i) of store"
        :key="i"
      >
        <div class="list-left">
          <img :src="require(`../assets/produce/${item.src}`)" />
        </div>
        <div class="list-right">
          <p class="title">{{ item.store_name }}</p>
          <div class="evaluate">
            <van-rate
              v-model="value"
              :size="20"
              color="#dc3545"
              void-icon="star"
              void-color="#eee"
            />
          </div>
          <p class="position">{{ item.street }}</p>
          <p class="price">
            <span>
              <span>{{ item.single }}</span>
              <span>{{ item.ordinary }}</span>
            </span>
            <span>已售566</span>
          </p>
          <p class="price">
            <span>
              <span>{{ item.experience }}</span>
              <span>{{ item.coach }}</span>
            </span>
            <span>已售83</span>
          </p>
        </div>
      </router-link>
    </div>
    <!-- 商家列表 结束 -->
    <tabbar></tabbar>
    <!-- 底线 -->
    <div class="bottom">······已经到底了······</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 5,
      store: [],
    };
  },
  methods: {
    loadStore() {
      this.axios.get("/store").then((result) => {
        this.store = result.data.data;
      });
    },
  },
  mounted() {
    this.loadStore();
  },
};
</script>

<style>
.circle {
  padding: 130px 0 100px 0;
}
.circle .list {
  width: 95%;
  margin: 0 auto;
  border-bottom: 1px solid #ddd;
  display: flex;
  color: #333;
  text-align: left;
  line-height: 30px;
}
.circle .list-left {
  width: 35%;
  padding-top: 10px;
}
.circle .list-left > img {
  width: 100%;
  display: block;
}
.circle .list-right {
  width: 65%;
  padding: 10px;
}
.circle .title {
  font-size: 15px;
  font-weight: 600;
}
.circle .evaluate {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  line-height: 20px;
}
.circle .price {
  display: flex;
  justify-content: space-between;
}
.circle .price > span > :first-child {
  color: #007bff;
  margin-right: 10px;
}
.circle .price > :last-child {
  color: #999;
}
.circle .bottom {
  color: #aaa;
  margin-top: 20px;
}
</style>
